<script setup>
import {reactive} from "vue";
import request from "@/utils/request";
import {ElMessage} from "element-plus";

/**
 * 本地存储的账户信息
 *
 * @type {any}
 */
const account = JSON.parse(localStorage.getItem('account-info') || '{}')

/**
 * 学生数据
 *
 * @type {UnwrapNestedRefs<{form: {studentBusinessNo: string, studentCreateTime: string, studentCountNumber: string, studentEmploymentState: string, studentOrderClassAdminNo: string, studentOrderClassReviewState: string, studentBusinessName: string, studentOrderClassName: string, studentOrderClassNo: string, studentEmail: string, studentAge: number, studentUpdateMan: string, studentUpdateTime: string, studentName: string, studentIntroduction: string, studentNo: string, studentComprehensiveEvaluation: string, studentMajorName: string, studentPhone: string, studentSex: string, studentOrderClassAdminName: string, studentCreateMan: string, studentMajorNo: string, studentPhoto: string}}>}
 */
const studentData = reactive({
    form: {
        studentNo: '',
        studentName: '',
        studentAge: 0,
        studentSex: '',
        studentIntroduction: '',
        studentComprehensiveEvaluation: '',
        studentOrderClassReviewState: '',
        studentBusinessNo: '',
        studentBusinessName: '',
        studentEmploymentState: '',
        studentOrderClassNo: '',
        studentOrderClassName: '',
        studentOrderClassAdminNo: '',
        studentOrderClassAdminName: '',
        studentMajorNo: '',
        studentMajorName: '',
        studentPhoto: '',
        studentPhone: '',
        studentEmail: '',
        studentCreateMan: '',
        studentCreateTime: '',
        studentUpdateMan: '',
        studentUpdateTime: '',
        studentCountNumber: '',
    }
})


/**
 * 学生数据
 *
 * @type {UnwrapNestedRefs<{form: {studentEmail: string, studentAge: number, studentName: string, studentNo: string, studentPhone: string, studentSex: number}}>}
 */
const studentNewData = reactive({
    form: {
        studentNo: '',
        studentName: '',
        studentAge: 0,
        studentSex: 0,
        studentPhone: '',
        studentEmail: '',
    }
})

/**
 * 加载个人信息
 */
const loadStudent = () => {
    request.get(`/api/student/student-info/${account.accountNo}`).then(res => {
        if (res.code === "200") {
            if (res.data === null) {
                studentData.form = {}
            } else {
                studentData.form = res.data
            }
        }
    })
}
loadStudent();

/**
 * 更新个人信息
 */
const updateInfo = () => {
    if (account.accountRoleName === 'visitor-student') {
        ElMessage.info("游客-学生仅可以查看信息")
    } else {
        studentNewData.form.studentNo = studentData.form.studentNo
        studentNewData.form.studentName = studentData.form.studentName
        studentNewData.form.studentAge = studentData.form.studentAge
        studentNewData.form.studentPhone = studentData.form.studentPhone
        studentNewData.form.studentEmail = studentData.form.studentEmail
        if (studentData.form.studentSex === "男") {
            studentNewData.form.studentSex = 1
        } else {
            studentNewData.form.studentSex = 0
        }
        request.put(`/api/student/update-info`, studentNewData.form).then(res => {
            if (res.code === "200") {
                loadStudent();
                ElMessage.success("修改成功")
            } else {
                ElMessage.error(res.msg)
            }
        })
    }
}

/**
 * 上传成功
 *
 * @param res 头像
 */
const uploadSuccess = (res) => {
    ElMessage.success("上传成功")
    account.accountPhoto = res.data
}

/**
 * 获取账号
 */
const getAccountNo = () => {
    if (account.accountRoleName === 'visitor-student') {
        ElMessage.info("游客-学生仅可以查看信息")
    } else {
        request.get(`/files/get-account-no/${account.accountNo}`)
    }
}
</script>

<template>
    <div>
        <div class="card" style="width: 50%; padding: 40px;">
            <el-form :model="studentData.form" label-width="100px" label-position="center"
                     style="padding-right: 40px">
                <el-form-item label="头像">
                    <el-image style="width: 150px; height: 150px" :src="account.accountPhoto"/>
                    <el-upload
                            class="avatar-uploader"
                            action="http://localhost:9090/files/upload"
                            :show-file-list="false"
                            list-type="picture"
                            :on-success="uploadSuccess">
                        <div style="margin-top: 220px; margin-left: -200px"
                             v-if="account.accountRoleName === 'common-student'">
                            <el-button @click="getAccountNo" type="primary" size="middle" round>修改头像</el-button>
                        </div>
                    </el-upload>
                    <div style="margin-top: 220px; margin-left: -150px"
                         v-if="account.accountRoleName === 'visitor-student'">
                        <el-button @click="getAccountNo" type="primary" size="middle" round>修改头像</el-button>
                    </div>
                </el-form-item>
                <el-form-item label="学号" prop="studentNo">
                    <el-input style="width: 400px" v-model="studentData.form.studentNo" autocomplete="off" disabled/>
                </el-form-item>
                <el-form-item label="姓名" prop="studentName">
                    <el-input v-model="studentData.form.studentName" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="年龄" prop="studentAge">
                    <el-input v-model="studentData.form.studentAge" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="性别">
                    <el-radio-group v-model="studentData.form.studentSex">
                        <el-radio label="男">男</el-radio>
                        <el-radio label="女">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="手机号" prop="studentPhone">
                    <el-input v-model="studentData.form.studentPhone" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="邮箱" prop="studentEmail">
                    <el-input v-model="studentData.form.studentEmail" autocomplete="off"/>
                </el-form-item>
            </el-form>
            <div>
                <el-button @click="updateInfo" type="primary"
                           style="margin-bottom: 10px;margin-left: 350px">修改信息
                </el-button>
            </div>
        </div>
        <div class="card" style="margin-top: 10px;width: 50%;padding: 40px;">
            <el-form :model="studentData.form" label-width="100px" label-position="center" style="padding-right: 40px">
                <el-form-item label="订单班审核" prop="studentOrderClassReviewState">
                    <el-input style="width: 400px" v-model="studentData.form.studentOrderClassReviewState"
                              autocomplete="off" disabled/>
                </el-form-item>
                <el-form-item label="专业" prop="studentMajorName">
                    <el-input v-model="studentData.form.studentMajorName" autocomplete="off" disabled/>
                </el-form-item>
                <el-form-item label="订单班" prop="studentOrderClassName">
                    <el-input v-model="studentData.form.studentOrderClassName" autocomplete="off" disabled/>
                </el-form-item>
                <el-form-item label="订单班管理员" prop="studentOrderClassAdminName">
                    <el-input v-model="studentData.form.studentOrderClassAdminName" autocomplete="off" disabled/>
                </el-form-item>
                <el-form-item label="企业" prop="studentBusinessName">
                    <el-input v-model="studentData.form.studentBusinessName" autocomplete="off" disabled/>
                </el-form-item>
                <el-form-item label="企业录用" prop="studentEmploymentState">
                    <el-input v-model="studentData.form.studentEmploymentState" autocomplete="off" disabled/>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<style scoped>

</style>
